<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <div class="right-panel-search">
                    <div class="search-input">物料名称</div>
                    <el-select v-model="search.material_id"  filterable placeholder="请选择物料名称" clearable>
                        <el-option v-for="item in materialName" :key="item.id" :label="item.material_name" :value="item.id"/>
                    </el-select>
                    <div class="search-input">SKC</div>
                    <el-input v-model="search.skc" placeholder="请输入SKC" clearable @change="handleKeyDown"/>
                    <div class="search-input">物料需求来源</div>
                    <el-select v-model="search.source" placeholder="请选择" clearable>
                        <el-option label="板料" :value="2"></el-option>
                        <el-option label="大货" :value="1"></el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                </div>
            </div>
        </el-header>
        <el-header>
            <div>
                <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'car.create'">新增订单</el-button>
                <el-button type="primary" :disabled="selection.length==0" @click="allOrder" v-auth="'car.all'">批量下单</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="物料基础信息" prop="sample_clothing" align="center" width="310">
                    <template #default="scope">
                        <div class="shopInfo">
                            <el-image class="img" v-if="scope.row.materialSpec" :src="scope.row.materialSpec.image" :preview-src-list="scope.row.materialSpec.image_arr" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div style="width:150px" v-if="scope.row.materialSpec">物料SKC：{{scope.row.materialSpec.skc}}</div>
                                <div v-if="scope.row.materialSpec">物料名称：{{scope.row.material_name}}</div>
                                <div v-if="scope.row.materialSpec">色号:{{scope.row.materialSpec.color_number}}</div>
                                <div v-if="scope.row.materialSpec">颜色:{{scope.row.materialSpec.colour}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单位成分" prop="category_name" align="center">
                    <template #default="scope">
                        <div>单位:{{scope.row.unit_name }}</div>
                        <div v-if="scope.row.materialSpec">成分:{{scope.row.materialSpec.material.component_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="供应商信息" prop="apply_name" align="center"></el-table-column>
                <el-table-column label="采购量" prop="need_num" align="center">
                    <template #default="scope">
                        <div>类型:{{scope.row.source_name}}</div>
                        <el-input v-model="scope.row.need_num" clearable>
                            <template #append>{{scope.row.unit_name }}</template>
                        </el-input>
                        <el-button type="primary" size="small" @click="blur(scope.row, scope.$index)">确定</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="物料需求来源" prop="material_name" align="center">
                    <el-table-column label="SKC" prop="SKC" align="center"></el-table-column>
                    <el-table-column label="工厂货号" prop="factory_number" align="center"></el-table-column>
                    <el-table-column label="批次号" prop="batch_number" align="center"></el-table-column>
                    <el-table-column label="单据来源" prop="order_no" align="center">
                        <template #default="scope">
                                {{scope.row.order_no}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-popconfirm title="确定下单吗？" @confirm="table_order(scope.row, scope.$index)" v-auth="'car.order'">
                                <template #reference>
                                    <el-button text type="primary" size="small">下单</el-button>
                                </template>
                            </el-popconfirm>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="danger" size="small" v-auth="'car.del'">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save-dialog>
</template>

<script>
import saveDialog from './save'

export default {
	name: 'user',
	components: {
		saveDialog
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			group: [],
			apiObj: this.$API.material.getshopCar.lists,
			selection: [],
			search: {
				material_id: null,
				skc: null,
                source:null
			},
			//所需数据选项
			cates: [],
            apply:[],
            materialName:[],
		}
	},
	mounted() {
        this.getName()
	},
	methods: {
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
		//删除
		async table_del(row, index) {
			var reqData = { id: row.id }
			var res = await this.$API.material.getshopCar.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.tableData.splice(index, 1);
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
        async blur(row){
            let reqData = {id:row.id,need_num:row.need_num}
            var res = await this.$API.material.getshopCar.edit.post(reqData);
            if (res.code == 1) {
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
        },
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        // 获取物料名称
        async getName(){
            var res = await this.$API.all.material.get();
            this.materialName = res.data;
        },
        async change(e){
            if(e==1){
                var res = await this.$API.all.Apply.get({type:3});
                this.apply = res.data;
            }else if(e==2){
                var data = await this.$API.all.Apply.get({type:4});
                this.apply = data.data;
            }else if(e==3){
                var a = await this.$API.all.Apply.get({type:5});
                this.apply = a.data;
            }
        },
        selectionChange(selection) {
			this.selection = selection;
		},
        async table_order(row){
            var reqData = { ids: row.id };
            var res = await this.$API.material.getshopCar.pushOrder.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
        },
        allOrder(){
            var ids = [];
            this.selection.map(item=>{
                ids.push(item.id);
            })
            this.$confirm(`确定下单选中的 ${this.selection.length} 项吗？`,"提示",{ type: "warning", })
			.then(() => { this.table_create_all(ids); })
            .catch(() => {})
        },
        async table_create_all(ids) {
			var reqData = { ids: ids };
            var res = await this.$API.material.getshopCar.pushOrder.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
        handleKeyDown() {
            this.upsearch()
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
.el-input-group__append{
    padding: 0 8px;
}
</style>
